/*
 * @Author: Yuelei 
 * @Date: 2018-03-20 13:22:36 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-03-21 19:07:39
 */

import React from 'react';
import './index.scss';
import MUtil from 'util/mm.jsx';
import User from 'service/user-service.jsx'

const _mm= new MUtil;
const _user=new User;

class Login extends React.Component {
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:'',
            redirect: _mm.getUrlParam('redirect')||'/'
        }
    }
    componentWillMount(){
        document.title='登录管理系统'
    }
    // 利用input的onChange()获取改变事件 当用户名改变，获取输入值
    onInputChange(e){
       let inputValue = e.target.value,
           inputName  = e.target.name;
          
        this.setState({
            [inputName]:inputValue
        })
    }
    // 监听键盘事件
    onInputKeyUp(e){
        // 监听回车13
        if(e.keyCode===13){
            this.onSubmit()
        }
    }
    // 用户提交(拿出输入的用户名和密码然后提交)
    onSubmit(e){
        let loginInfo={
            username:this.state.username,
            password:this.state.password,
        },
            checkResult=_user.checkLoginInfo(loginInfo);
          // 检查登录信息（通过才进行登录操作）
          // 验证通过进行登录操作
        if(checkResult.status){
          _user.login(loginInfo).then((res)=>{
            // 本地存储(注意res是json，所以进行json序列化)
            _mm.setStorage('userInfo',res);
            //   登陆成功如果没有跳转页面默认跳转/
            this.props.history.push(this.state.redirect)},
            (errMsg)=>{
                _mm.errorTips(errMsg);
            })
         }
        //  验证输入不通过
        else{
          _mm.errorTips(checkResult.msg);
        }
    
    }
    render() {
        return (

            <div className="col-md-4 col-md-offset-4">
                <div className="panel panel-default login-panel">
                    <div className="panel-heading">欢迎登录--管理系统</div>
                       <div className="panel-body">
                            <div>
                               <div className="form-group">
                                   {/* <label htmlFor="exampleInputEmail1">用户名</label> */}
                                   <input type="text" 
                                   name="username"
                                   className="form-control"  
                                   placeholder="请输入用户名"
                                   onKeyUp={(e)=>this.onInputKeyUp(e)}
                                   onChange={(e)=>{this.onInputChange(e)}}/>
                                  
                               </div>
                                <div className="form-group">
                                    {/* <label htmlFor="exampleInputPassword1">密码</label> */}
                                    <input type="password" 
                                    name="password"
                                    className="form-control"  
                                    placeholder="请输入密码"
                                    onKeyUp={(e)=>this.onInputKeyUp(e)}
                                    onChange={(e)=>{this.onInputChange(e)}}/>
                                </div>
                            <button className="btn btn-primary btn-lg btn-block"
                            onClick={(e)=>{this.onSubmit(e)}}>登录</button>
                            </div>
                        </div>
                 </div>
                            
            </div>
              );
                        }
                   
                    }
                   
 export default Login